import { Input } from 'antd';

import React from 'react';
import Markdown from 'react-markdown'

// import './my-markdown.css'
import 'highlight.js/styles/github.css'            // 代码语法高亮样式，要手动引入

import rehypeHighlight from 'rehype-highlight'  // 代码语法高亮
import remarkGfm from 'remark-gfm'              // 支持 github 风格（如：表格语法）
import rehypeRaw from 'rehype-raw'              // 编译 html
import remarkMath from 'remark-math'            // 支持数学
import rehypeMathjax from 'rehype-mathjax'      // 展示数学

import { MdState } from '../model/BizState';


const { TextArea } = Input

class MarkdownForm extends React.Component<any, MdState> {

    constructor(props: any) {
        super(props)
        this.state = {
            content: ''
        }
    }

    onContentChange = (e: any) => { // 为了预览
        let content = e.target.value
        this.setState({ content })
    }

    render() {
        return (
            <div id="MyMDDIV">
                <h3>Markdown 测试</h3>

                <TextArea placeholder="请输入内容"
                    autoSize={{ minRows: 15 }} // , maxRows: 40
                    onChange={this.onContentChange} />

                <Markdown
                    children={this.state.content} // 设置内容
                    remarkPlugins={[remarkGfm, remarkMath]}
                    rehypePlugins={[rehypeHighlight, rehypeRaw, rehypeMathjax]}
                />
            </div>
        )
    }
}

export default MarkdownForm   // 直接这样 export 获取不到路由参数